<template>
  <div class="index">
    <div class="container">
      <div class="swiper-box">
        <div class="nav-menu">
          <ul class="menu-wrap">
            <li class="menu-item">
              <a href="javascript:;">手机 电话卡</a>
            </li>
            <li class="menu-item">
              <a href="javascript:;">电视 盒子</a>
            </li>
            <li class="menu-item">
              <a href="javascript:;">笔记本 显示器</a>
            </li>
            <li class="menu-item">
              <a href="javascript:;">家电 插线板</a>
            </li>
            <li class="menu-item">
              <a href="javascript:;">出行 穿戴</a>
            </li>
            <li class="menu-item">
              <a href="javascript:;">智能 路由器</a>
            </li>
            <li class="menu-item">
              <a href="javascript:;">电源 配件</a>
            </li>
            <li class="menu-item">
              <a href="javascript:;">生活 箱包</a>
            </li>
          </ul>
        </div>
        <el-carousel :interval="5000" arrow="always" height="460px">
          <el-carousel-item v-for="(item, index) in slideList" :key="index">
            <a :href="'/product/' + item.pid"><img :src="item.img" alt="" /></a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="ads-box">
        <a href=""
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340"
            alt=""
        /></a>
        <a href=""
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340"
            alt=""
        /></a>
        <a href=""
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340"
            alt=""
        /></a>
        <a href=""
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340"
            alt=""
        /></a>
      </div>
      <div class="banner">
        <a href=""
          ><img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1533&h=150&f=webp&q=90"
            alt=""
        /></a>
      </div>
      <!--
      <div class="product-box">
        <h2>手机</h2>
        <div class="wrapper">
          <div class="banner-left">
            <a href=""
              ><img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&w=293&h=768&f=webp&q=90"
            /></a>
          </div>
          <div class="list-box">
            <div class="list">
              <div class="item" v-for="(item, index) in phoneList" :key="index">
                <span>新品</span>
                <div class="item-img">
                  <a href=""><img :src="item.main_image" alt="" /></a>
                </div>
                <div class="item-info">
                  <h3>
                    <a href="">{{ item.pro_name }}</a>
                  </h3>
                  <p>{{ item.subtitle | currency }}</p>
                  <p class="price">{{ item.price }}元</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>-->
    </div>
    <div class="seckill-banner">
      <ul id="seckill-ul">
          <li class="active J_currentBanner">
              <a href="javascript:void(0);">
                  <em id="endtime">10:00</em>
                  <span id="showtime"></span>
              </a>
          </li>
          <li>
              <a href="javascript:void(0);">
                  <em>14:00</em><span> 即将开始</span>
              </a>
          </li>
          <li> <a href="javascript:void(0);"><em>20:00</em><span> 即将开始</span></a> </li>
          <li> <a href="javascript:void(0);"><em>22:00</em><span> 即将开始</span></a> </li>
      </ul>
  </div>

  <div class="seckill-con">
      <ul class="J_currentCon clearfix">
        <li>
            <a href="#" class="seckill-box"></a>
            <div class="item-box">
                <span class="img-con">
                    <img class="done"
                         src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c1d6232caff62f3b59d11ee09abdb9d5.jpg">
                </span> <span class="pro-con">
                    <span class="name">Redmi K30 Pro 12GB+128GB 太空灰 </span>
                    <span class="desc">双模5G，骁龙865，弹出全面屏</span>
                    <span class="pro-num"><span>库存:</span><em class="s-num-9199">10</em></span>
                    <span class="price">
                        2999.00元
                        <del>3699元</del>
                    </span>
                </span>
            </div> <a href="javascript:" data-url='/seckilldetail' class="J_buy  J_bug_9199"
                      data-id="2194100014">立即抢购</a>
        </li>
      </ul>
  </div>
  </div>
  
</template>

<script>
import $ from 'jquery';
import baseUrl from "../evn";
export default {
  name: "index",
  components: {
   
  },
  filters: {
    currency(val) {
      if (val.length <= 20) return val;
      return "¥" + val.substr(0, 20) + "...";
    },
  },
  mounted() {
    this.getPhoneList();
    this.initSeckillTime();
    this.initSeckillTimes();
    this.seckillDetails();
  },
  methods: {
    getPhoneList() {
      this.axios
        .get("/getpros", {
          params: {
            cateid: "100001",
            pagesize: 8,
          },
        })
        .then((resp) => {
          this.phoneList = resp;
        })
        .catch((resp) => {
          console.log(resp);
        });
    },
    initSeckillTime(){
      // 1、秒杀倒计时
      setInterval(() => {
          this.countDown();
      }, 1000);
    },
    countDown(){
      var nowtime = new Date();
      var time = $("#endtime").attr("data-endtime");
      var endtime = new Date(time); // "2022/8/15,15:00:00"
      var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
      var d = parseInt(lefttime / (24 * 60 * 60))
      var h = parseInt(lefttime / (60 * 60) % 24);
      var m = parseInt(lefttime / 60 % 60);
      var s = parseInt(lefttime % 60);
      h = this.addZero(h);
      m = this.addZero(m);
      s = this.addZero(s);
      var sTime = "活动倒计时<br>" + d + "天" + h + "时" + m + "分" + s + "秒";
      $("#showtime").html(sTime).css("line-height", "20px");
      $(".J_buy").text("立即抢购").removeClass("btnDis");
      if (lefttime <= 0) {
          $("#showtime").html("活动已结束");
          $(".J_buy").text("活动已结束").addClass("btnDis").attr("href", "javascript:void(0);");
          return;
      }
      if (parseInt($(".s-num-9199").text()) == 0) {
          $(".J_bug_9199").text("已售罄").addClass("btnDis").attr("href", "javascript:void(0);");
          return;
      }
    },
    addZero(i){
      return i < 10 ? "0" + i : i + "";
    },
    initSeckillTimes(){
      var self = this;
      $.ajax({
        method: "GET",
        url: "http://localhost:5003/api/Seckill",
        dataType: "json",
        success: function (result) {
            if (result.ErrorNo == "0") {
                // 1、在页面上增加显示时间
                var resultList = result.ResultList;
                
                // 2、先将页面数据缓存在数组中
                var bannerList = [];
                $.each(resultList, function (i, val) {
                    if (i == 0) {
                        bannerList.push("<li class='active J_currentBanner'>");
                    } else {
                        bannerList.push("<li>");
                    }
                    bannerList.push("<a href='javascript: void (0);'>");
                    if (i == 0) {
                        var endtime = val.SeckillDate + "," + val.SeckillEndtime;
                        bannerList.push("<em id='endtime' data-endtime='" + endtime + "' data-timeId='" + val.Id +"'>" + val.SeckillStarttime + "</em>");
                        bannerList.push("<span id='showtime'></span>");
                    } else {
                        bannerList.push("<em>" + val.SeckillStarttime + "</em>");
                        bannerList.push("<span>即将开始</span>");
                    }
                    bannerList.push("</a>");
                    bannerList.push("</li>");
                });
              /*  bannerList.push('<li id="userbox"> <a href="javascript:void(0);"><em onclick="loginBox()">登陆</em><span onclick="registryBox()"> 注册</span></a> </li>');*/
                // 3、显示到页面上
                $("#seckill-ul").html(bannerList.join(""));

                // 4、显示倒计时
                self.countDown();

                // 5、加载秒杀商品
                self.loadSeckills();
            } else {
                alert(result.ErrorInfo);
            }
        }
      })
    },
    loadSeckills(){
      var self = this;
      var TimeId = $("#endtime").attr("data-timeId");
      $.ajax({
          method: "GET",
          url: "http://localhost:5003/api/Seckill/" + TimeId,
          dataType: "json",
          success: function (result) {
              if (result.ErrorNo == "0") {
                  // 1、在页面上增加显示时间
                  var resultList = result.ResultList;
                  console.log(resultList);
                  // 2、先将页面数据缓存在数组中
                  var seckillList = [];
                  $.each(resultList, function (i, val) {
                      seckillList.push("<li>");
                      seckillList.push("<a href='#' class='seckill-box'></a>");
                      seckillList.push("<div class='item-box'>");
                      seckillList.push("<span class='img-con'>");
                      seckillList.push("<img class='done' src = '" + val.SeckillUrl +"' >");
                      seckillList.push("</span> <span class='pro-con'>");
                      seckillList.push("<span class='name'>" + val.SeckillName +"</span>");
                      seckillList.push("<span class='desc'>" + val.SeckillDescription +"</span>");
                      seckillList.push("<span class='pro-num'><span>库存:</span><em class='s-num-9199'>" + val.SeckillStock +"</em></span>");
                      seckillList.push("<span class='price'>");
                      seckillList.push("" + val.SeckillPrice +"元");
                      seckillList.push("<del>" + val.SeckillPrice +"元</del>");
                      seckillList.push("</span>");
                      seckillList.push("</div>");
                      seckillList.push("<a href='javascript:;' class='J_buy  J_bug_9199' data-endtime='" + $("#endtime").attr("data-endtime") + "'  data-seckillid='" + val.Id + "'> 立即抢购</a >");
                    
                      seckillList.push("</li>");
                  });
                  // 3、显示到页面上
                  $(".J_currentCon").html(seckillList.join(""));
              } else {
                  alert(result.ErrorInfo);
              }
          }
      })
    },
    seckillDetails(){
      var self = this;
      $(".J_currentCon").on("click",".J_buy", function () {
        // 4.1、是否已经登录
        /*if (isHasLogin()) {
            // 4.2 跳转到详情页
            location.href = $(this).data("url");
        }*/
         // 1、获取详情页参数
         var seckillId = $(this).data("seckillid");
         var endtime = $(this).data("endtime");
         console.log(seckillId);
         console.log(endtime);
         // 4.2 跳转到详情页
         self.$router.push({
            name:"seckilldetail",
            params:{
              "seckillId":seckillId,
              "endtime":endtime
            }
        });
      });
    }
  },
  data() {
    return {
      phoneList: [],
      slideList: [
        {
          pid: "2",
          img:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/21b26ea3661cb4de289d4ab75591dabf.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
        },
        {
          pid: "1",
          img:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/294d206e6b4c7f62251842db940fb194.jpg?w=2452&h=920",
        },
        {
          pid: "3",
          img:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a17f560beb1abe201b6b1f123cc1d5d9.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
        },
        {
          pid: "4",
          img:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ebff5f5c1f52f2dbdd611897adbefd4.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
        },
        {
          pid: "5",
          img:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ef4160c861b998239bce9adb82341e7.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.seckill-banner {
    background: #414141;
    height: 68px;
    margin-bottom: 22px;
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
.seckill-banner ul {
    width: 100%;
    overflow: hidden;
    height: 68px;
 
}
.seckill-banner ul li {
    float: left;
    width: 20%;
    cursor: pointer;
    line-height: 68px;
    height: 68px;
    text-align: center;
    background: #414141;
}
.seckill-banner .active {
    background: #f1393a;
}

.seckill-banner li span {
    display: inline-block;
    margin-left: 15px;
    text-align: left;
    line-height: 1;
    vertical-align: middle;
    color: #fff;;
}
.seckill-banner li em {
    display: inline-block;
    margin-left: 5px;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
    color: #fff;
    line-height: 20px;
}
.seckill-con{
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
.seckill-con ul li {
    background: #fff;
    width: 393px;
    height: 190px;
    margin-left: 13px;
    margin-bottom: 13px;
    transition: all .2s linear;
    position: relative;
    z-index: 2;
    float: left;
}

.seckill-con ul li .img-con {
    width: 190px;
    height: 190px;
    float: left;
    margin-left: 0px !important;
    padding-top: 0px !important;
    background-color: #e9e9e9;
    border: 0 none;
    overflow: hidden;
}
.seckill-con ul li span {
    display: block;
}
.seckill-con ul li .pro-con .name {
    font-size: 16px;
    color: #333;
    height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    line-height: 16px;
}
.seckill-con ul li .pro-con .desc {
    color: rgba(0,0,0,0.54);
    margin-top: 7px;
    font-size: 12px;
    line-height: 16px;
    height: 22px;
    width: 100%;
    overflow: hidden;}

    .seckill-con ul li .pro-con .price {
        font-size: 16px;
        color: #f1393a;
        line-height: 1;
        margin-top: 14px;
    }
  
    .seckill-con ul li img {
        width: 100%;
        height: 190px;
        display: block;
        padding: 0;
        border-style: none;
    }
    .seckill-con ul li .pro-con {
        margin-left: 210px;
        width: 180px;
        padding-top: 30px;
    }
    .seckill-con ul li .J_buy {
        font-size: 14px;
        position: absolute;
        right: 70px;
        bottom: 25px;
        z-index: 5;
        background-color: #ff6700;
        display: block;
        width: 120px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
    }
  
    .seckill-con ul li .pro-con .pro-num span{
        display: inline-block;
        font-size: 12px;
        color: rgba(0,0,0,0.54);
    }
    .seckill-con ul li .pro-con .pro-num em{
        display: inline-block;
        font-size: 12px;
        color: rgba(0,0,0,0.54);
    }
    .seckill-con ul li .pro-con .pro-num{
        height: 12px;
        line-height:12px;
    }

    .seckill-con ul li .btnDis{
        background-color:#ccc;
    }

    .loginitem input{
        width: 260px;
        height: 36px;
    }
    .loginitem{
        padding: 8px;
    }
    .loginitem a{
        width:262px;
        height: 34px;
        background-color:#ff6700;
        display: block;
        text-decoration: none;
        text-align: center;
        line-height: 34px;
        color:#fff;
    }
    #loginbox,#regbox
    {
        display: none;
    }

.el-carousel__container {
  img {
    height: 460px;
  }
}
.index {
  .banner {
    margin-bottom: 50px;
    img {
      width: 1226px;
    }
  }
  .ads-box {
    display: flex;
    justify-content: space-between;
    a {
      width: 296px;
      margin-top: 14px;
      margin-bottom: 31px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .swiper-box {
    .nav-menu {
      position: absolute;
      width: 264px;
      height: 460px;
      z-index: 9;
      padding: 26px 0px;
      background-color: #55585a7a;
      box-sizing: border-box;
      .menu-wrap {
        .menu-item {
          height: 50px;
          line-height: 50px;
          a {
            font-size: 16px;
            color: #fff;
            padding-left: 30px;
            display: block;
          }
          &:hover {
            background-color: #ff6600;
          }
        }
      }
    }
  }

  .product-box {
    background-color: #f5f5f5;
    h2 {
      margin: 0;
      font-size: 22px;
      font-weight: 200;
      height: 58px;
      line-height: 58px;
      color: #333;
    }
    .wrapper {
      display: flex;
      .banner-left {
        margin-right: 16px;
        img {
          width: 234px;
        }
      }
      .list-box {
        width: 986px;
        margin-bottom: 14px;
        &:last-child {
          margin-bottom: 0px;
        }
        .list {
          margin: 0 0 -14px -14px;
          .item {
            text-align: center;
            height: 260px;
            padding: 20px 0;
            position: relative;
            z-index: 1;
            float: left;
            width: 228px;
            margin-left: 14px;
            margin-bottom: 14px;
            background: #fff;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
            .item-img {
              img {
                width: 160px;
              }
            }
            .item-info {
              h3 {
                margin: 0 10px 2px;
                font-size: 14px;
                font-weight: 400;
                color: #333;
              }
              p {
                margin: 10px 10px 10px;
                height: 18px;
                font-size: 12px;
                color: #b0b0b0;
              }
              .price {
                text-align: center;
                color: #ff6700;
                margin: 0 10px 14px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
.el-carousel__arrow--left {
  left: 274px;
}
</style>